<template>
    <div class="doctor-list-page">
        <!-- 顶部导航 -->
        <page-header title="医生列表" />

        <!-- 筛选栏 -->
        <div class="filter-bar">
            <van-dropdown-menu>
                <van-dropdown-item v-model="filter.department" :options="departmentOptions" title="科室" />
                <van-dropdown-item v-model="filter.title" :options="titleOptions" title="职称" />
                <van-dropdown-item v-model="filter.sort" :options="sortOptions" title="排序" />
            </van-dropdown-menu>
        </div>

        <!-- 医生列表 -->
        <div class="doctor-list">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div v-for="doctor in doctors" :key="doctor.id" class="doctor-item"
                        @click="onDoctorClick(doctor.id)">
                        <img :src="doctor.avatar || '/images/doctor-default.jpg'" class="doctor-avatar" />
                        <div class="doctor-info">
                            <div class="doctor-header">
                                <span class="doctor-name">{{ doctor.name }}</span>
                                <span class="doctor-title">{{ doctor.title }}</span>
                            </div>
                            <div class="doctor-department">{{ doctor.department }}</div>
                            <div class="doctor-speciality">
                                <span>擅长：{{ doctor.speciality }}</span>
                            </div>
                            <div class="schedule-info">
                                <span class="schedule-count">{{ doctor.scheduleCount }}个出诊安排</span>
                                <span class="earliest">最早可约: {{ doctor.earliestDate }}</span>
                            </div>
                        </div>
                        <van-button size="small" type="primary" class="booking-btn">挂号</van-button>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PageHeader from '@/components/common/PageHeader.vue'

const route = useRoute()
const router = useRouter()
const hospitalId = Number(route.params.id)
const departmentId = route.query.departmentId ? Number(route.query.departmentId) : null

// 筛选条件
const filter = reactive({
    department: departmentId ? String(departmentId) : '',
    title: '',
    sort: 'default'
})

// 科室筛选选项
const departmentOptions = [
    { text: '全部科室', value: '' },
    { text: '心内科', value: '1' },
    { text: '呼吸科', value: '2' },
    { text: '神经科', value: '3' },
    { text: '骨科', value: '4' }
]

// 职称筛选选项
const titleOptions = [
    { text: '全部职称', value: '' },
    { text: '主任医师', value: '主任医师' },
    { text: '副主任医师', value: '副主任医师' },
    { text: '主治医师', value: '主治医师' },
    { text: '住院医师', value: '住院医师' }
]

// 排序选项
const sortOptions = [
    { text: '综合排序', value: 'default' },
    { text: '评分最高', value: 'rating' },
    { text: '接诊最多', value: 'count' }
]

// 列表状态
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const page = ref(1)
const doctors = ref([
    {
        id: 1,
        name: '张医生',
        avatar: '/images/doctor1.jpg',
        title: '主任医师',
        department: '心内科',
        speciality: '冠心病、心肌梗死、心律失常',
        scheduleCount: 5,
        earliestDate: '明天'
    },
    {
        id: 2,
        name: '李医生',
        avatar: '/images/doctor2.jpg',
        title: '副主任医师',
        department: '神经科',
        speciality: '头痛、头晕、失眠、抑郁症',
        scheduleCount: 3,
        earliestDate: '后天'
    },
    {
        id: 3,
        name: '王医生',
        avatar: '/images/doctor3.jpg',
        title: '主任医师',
        department: '呼吸科',
        speciality: '哮喘、肺炎、慢性阻塞性肺疾病',
        scheduleCount: 4,
        earliestDate: '明天'
    }
])

// 上拉加载
const onLoad = () => {
    // 如果是刷新触发的,重置页码
    if (refreshing.value) {
        doctors.value = []
        page.value = 1
        refreshing.value = false
    }

    // 模拟网络请求
    setTimeout(() => {
        // 这里应该根据筛选条件从API获取数据
        loading.value = false
        // 加载完毕
        finished.value = true
    }, 1000)
}

// 下拉刷新
const onRefresh = () => {
    finished.value = false
    loading.value = true
    onLoad()
}

const onDoctorClick = (doctorId: number) => {
    router.push(`/hospital/${hospitalId}/doctor/${doctorId}`)
}

onMounted(() => {
    // 在实际应用中，这里应该根据 hospitalId 和筛选条件从API获取医生列表
    console.log(`加载医院ID: ${hospitalId}, 科室筛选: ${filter.department}`)
})
</script>

<style scoped lang="scss">
.doctor-list-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-top: 46px; // 为顶部导航栏预留空间
    padding-bottom: 16px;

    .filter-bar {
        position: sticky;
        top: 46px;
        z-index: 10;
    }

    .doctor-list {
        padding-top: 8px;

        .doctor-item {
            display: flex;
            background: #fff;
            padding: 16px;
            margin-bottom: 8px;

            .doctor-avatar {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                margin-right: 12px;
            }

            .doctor-info {
                flex: 1;

                .doctor-header {
                    display: flex;
                    align-items: center;
                    margin-bottom: 6px;

                    .doctor-name {
                        font-size: 16px;
                        font-weight: 500;
                        color: #333;
                        margin-right: 8px;
                    }

                    .doctor-title {
                        font-size: 12px;
                        color: #666;
                    }
                }

                .doctor-department {
                    font-size: 14px;
                    color: #1890FF;
                    margin-bottom: 6px;
                }

                .doctor-speciality {
                    font-size: 12px;
                    color: #999;
                    margin-bottom: 6px;

                    span {
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .schedule-info {
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;

                    .schedule-count {
                        color: #666;
                    }

                    .earliest {
                        color: #FF525D;
                    }
                }
            }

            .booking-btn {
                align-self: center;
                margin-left: 12px;
            }
        }
    }
}
</style>